import React from 'react'
import {
    Link,
    useNavigate
} from "react-router-dom";
import './font-awesome.min.css'
import './style.css'
import request from "../../utils/requests";
import { notification } from 'antd';
export default function Login() {
    const navigate = useNavigate();
    const login = async () => {
        const username = document.getElementById('user').value
        const password = document.getElementById('password').value
        if (username.length < 2 || username.length > 20) {
            notification['error']({
                message: '用户名长度不得小于2或大于20',
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
        } else if (password.length < 6 || password.length > 20) {
            notification['error']({
                message: '密码长度不得小于6或大于20',
                description:
                  'The world is suidernly late the mountains rivers sre slready autum.',
                duration:2
            });
        } else {
            const data = {
                username, password
            };
            const user = await request('/login', { method: "POST", data })
            if (user.data.success) {
                notification['success']({
                    message: `${user.data.message}`,
                    description:
                      'The world is suidernly late the mountains rivers sre slready autum.',
                    duration:2
                });
                navigate('/');
                sessionStorage.setItem('token',user.data.userId.id)
            } else {
                notification['error']({
                    message: `${user.data.message}`,
                    description:
                      'The world is suidernly late the mountains rivers sre slready autum.',
                    duration:2
                });
            }
        }
    }
    return (
        <div className='login'>
            <section className="main">
                <div className="bottom-grid">
                    <div className="logo">
                        <h1 title="点击进入工艺品商城"> <Link to="/home">Welcome to the arts and crafts mall</Link></h1>
                    </div>
                </div>
                <div className="w3lhny-register">
                    <fieldset>
                        <div className="form">
                            <div className="form-row">
                                <input type="text" className="form-text" placeholder="请输入用户名" id='user' />
                            </div>
                            <div className="form-row">
                                <input type="password" className="form-text" placeholder="请输入密码" id='password' />
                            </div>
                            <div className="form-row button-login">
                                <button className="btn btn-login" onClick={login}>登录</button>
                            </div>
                        </div>
                    </fieldset>
                    <span className="create-account">Or Continue With!</span>
                    <p className="already">Already have an account  <Link to="/register">去注册</Link></p>
                </div>
            </section >
        </div >
    )
}
